<template>
	<view>
		<view class="header d-flex flex-nowrap a-center bz p-2">
			<view class="nav_list flex-1 d-flex j-center" v-for="(item,index) in nav" :key="index">
				<view class="nav_name" :class="navIndex==index ? 'check_name':''" @click="checkOne(index)">{{item}}</view>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="bz p-2">
			<view class="bz p-2 bg-white b-radius1 list mb-2" v-for="(item,index) in 3" :key="index">
				<view class="list_header d-flex flex-nowrap a-center j-sb">
					<view class="order_num">
						订单号:100012110210200
					</view>
					<view class="order_status">
						已关闭
					</view>
				</view>
				<view class="order_con py-2">
					<view class="pb-2 d-flex flex-nowrap a-center">
						<image src="/static/2.png" class="imgs" mode="aspectFill"></image>
						<view class="flex-1 px-2">
							<view class="good_name">肌活力保健膏</view>
							<view class="num">x1</view>
						</view>
						<view class="price">￥299.00</view>
					</view>
				</view>
				
				<view class="pt-2 d-flex flex-nowrap a-center" style="border-top: 1rpx solid #f8f8f8;">
					<view class="nums">共1件商品</view>
					<view class="flex-1 d-flex flex-nowrap j-end a-center">
						<view class="tag">合计：</view>
						<view class="all_price">￥299.00</view>
					</view>
				</view>
				<view class="pt-2 d-flex flex-nowrap j-end">
					<view class="btn">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav:['全部','待支付','待发货','已完成','退款'],
				navIndex:0
			}
		},
		methods: {
			checkOne(index){
				this.navIndex=index;
			}
		}
	}
</script>

<style scoped lang="scss">
	.list_header{
		height: 80rpx;
		border-bottom: 1rpx solid #f8f8f8;
		.order_num{
			font-size: 30rpx;
			font-family: SourceHanSansCN;
			font-weight: 600;
			color: #363636;
		}
		.order_status{
			font-size: 25rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #8C8C8C;
		}
	}
	.imgs{
		width: 150rpx;
		height: 100rpx;
		border-radius: 15rpx;
	}
	.good_name{
		line-height: 45rpx;
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #363636;
	}
	.num{
		font-size: 25rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #999999;
	}
	.price{
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #363636;
	}
	.all_price{
		color: red;
		font-weight: bold;
	}
	.btn{
		width: 82rpx;
		line-height: 35rpx;
		text-align: center;
		height: 35rpx;
		background: #2E4E7E;
		border-radius: 18rpx;
		font-size: 23rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #FFFFFF;
	}
.header{
	height: 100rpx;
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	background-color: #fff;
	.nav_name{
		height: 58rpx;
		line-height: 58rpx;
		color: #BBBBBB;
		font-size: 30rpx;
		padding: 0 10rpx;
		border-bottom: 2rpx solid #fff;
	}
	.check_name{
		color: #D7B073;
		border-bottom: 2rpx solid #D7B073;
	}
}
</style>
